<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<script src="https://lib.baomitu.com/vue/2.6.14/vue.min.js"></script>
<script src="https://unpkg.com/http-vue-loader"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.26.0/axios.min.js"></script>
<body>
<div id="app">
    <input id="file" mime="image/*" type="file" @change="handleFile"/>
    <button @click="uploadFile">upload</button>
    <img v-if="img!=''" :src="img" height="50px" width="100px">
</div>

</body>
<script>
    const vm = new Vue({
        el:'#app',
        data:{
            img: ''
        },
        methods:{
            handleFile(){
                let files = document.getElementById('file').files;
                if(!files){
                    return;
                }
                this.file=files[0];
            },
            uploadFile(){
                let formData = new FormData();
                formData.append("file",this.file);
                axios({
                    url:'/uploadFile',
                    method:'post',
                    data:formData
                }).then(res=>{
                    if(res.data.code > 0 ){
                        var m=res.data.data;
                        this.img=m;
                        console.log("返回地址",res.data.data);
                    }
                })
            }
        }
    })
</script>
</html>